<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Axios</title>
<script src="../../js/reader.js" type="text/javascript"></script>
<link href="../../css/reader.css" rel="stylesheet"/>
<link href="../../css/style.css" rel="stylesheet"/>
</head>
<bode>

<div class="window-body">
	<div class="workspace"> 
		<div class="article-wrap"> 
			<div class="article"> 
				<div class="article-body">

<p>Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。</p>
<h2 data-line="10" class="line"><a id="Features_10"></a>Features</h2>
<ul><li>从浏览器中创建 <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" target="_blank">XMLHttpRequests</a></li><li>从 node.js 创建 <a href="http://nodejs.org/api/http.html" target="_blank">http</a> 请求</li><li>支持 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" target="_blank">Promise</a> API</li><li>拦截请求和响应</li><li>转换请求数据和响应数据</li><li>取消请求</li><li>自动转换 JSON 数据</li><li>客户端支持防御 <a href="http://en.wikipedia.org/wiki/Cross-site_request_forgery" target="_blank">XSRF</a></li></ul>

<h2 data-line="21" class="line"><a id="_21"></a>浏览器支持</h2>
<p><a href="javascipt:void(0)" target="_blank"><img alt="Browser Matrix" src="../../images/axios.svg"></a></p>
<h2 data-line="29" class="line"><a id="_29"></a>安装</h2>
<p>使用 npm:</p>
<pre><code>$ npm install axios
</code></pre>
<p>使用 bower:</p>
<pre><code>$ bower install axios
</code></pre>
<p>使用 cdn:</p>
<pre><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/axios/dist/axios.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<h2 data-line="49" class="line"><a id="Example_49"></a>Example</h2>
<p>执行 <code>GET</code> 请求</p>
<pre><code><span class="hljs-comment">// 为给定 ID 的 user 创建请求</span>
axios.get(<span class="hljs-string">'/user?ID=12345'</span>)
  .then(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) </span>{
    <span class="hljs-built_in">console</span>.log(response);
  })
  .catch(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) </span>{
    <span class="hljs-built_in">console</span>.log(error);
  });

<span class="hljs-comment">// 可选地，上面的请求可以这样做</span>
axios.get(<span class="hljs-string">'/user'</span>, {
    <span class="hljs-attr">params</span>: {
      <span class="hljs-attr">ID</span>: <span class="hljs-number">12345</span>
    }
  })
  .then(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) </span>{
    <span class="hljs-built_in">console</span>.log(response);
  })
  .catch(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) </span>{
    <span class="hljs-built_in">console</span>.log(error);
  });
</code></pre>
<p>执行 <code>POST</code> 请求</p>
<pre><code>axios.post(<span class="hljs-string">'/user'</span>, {
    <span class="hljs-attr">firstName</span>: <span class="hljs-string">'Fred'</span>,
    <span class="hljs-attr">lastName</span>: <span class="hljs-string">'Flintstone'</span>
  })
  .then(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) </span>{
    <span class="hljs-built_in">console</span>.log(response);
  })
  .catch(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) </span>{
    <span class="hljs-built_in">console</span>.log(error);
  });
</code></pre>
<p>执行多个并发请求</p>
<pre><code><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getUserAccount</span>(<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">return</span> axios.get(<span class="hljs-string">'/user/12345'</span>);
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getUserPermissions</span>(<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">return</span> axios.get(<span class="hljs-string">'/user/12345/permissions'</span>);
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">acct, perms</span>) </span>{
    <span class="hljs-comment">// 两个请求现在都执行完成</span>
  }));
</code></pre>
<h2 data-line="109" class="line"><a id="axios_API_109"></a>axios API</h2>
<p>可以通过向 <code>axios</code> 传递相关配置来创建请求</p>
<h5 data-line="113" class="line"><a id="axiosconfig_113"></a>axios(config)</h5>
<pre><code><span class="hljs-comment">// 发送 POST 请求</span>
axios({
  <span class="hljs-attr">method</span>: <span class="hljs-string">'post'</span>,
  <span class="hljs-attr">url</span>: <span class="hljs-string">'/user/12345'</span>,
  <span class="hljs-attr">data</span>: {
    <span class="hljs-attr">firstName</span>: <span class="hljs-string">'Fred'</span>,
    <span class="hljs-attr">lastName</span>: <span class="hljs-string">'Flintstone'</span>
  }
});
</code></pre>
<h5 data-line="127" class="line"><a id="axiosurl_config_127"></a>axios(url[, config])</h5>
<pre><code><span class="hljs-comment">// 发送 GET 请求（默认的方法）</span>
axios(<span class="hljs-string">'/user/12345'</span>);
</code></pre>
<h3 data-line="134" class="line"><a id="_134"></a>请求方法的别名</h3>
<p>为方便起见，为所有支持的请求方法提供了别名</p>
<h5 data-line="138" class="line"><a id="axiosrequestconfig_138"></a>axios.request(config)</h5>
<h5 data-line="139" class="line"><a id="axiosgeturl_config_139"></a>axios.get(url[, config])</h5>
<h5 data-line="140" class="line"><a id="axiosdeleteurl_config_140"></a>axios.delete(url[, config])</h5>
<h5 data-line="141" class="line"><a id="axiosheadurl_config_141"></a>axios.head(url[, config])</h5>
<h5 data-line="142" class="line"><a id="axiosposturl_data_config_142"></a>axios.post(url[, data[, config]])</h5>
<h5 data-line="143" class="line"><a id="axiosputurl_data_config_143"></a>axios.put(url[, data[, config]])</h5>
<h5 data-line="144" class="line"><a id="axiospatchurl_data_config_144"></a>axios.patch(url[, data[, config]])</h5>
<h6 data-line="146" class="line"><a id="NOTE_146"></a>NOTE</h6>
<p>在使用别名方法时， <code>url</code>、<code>method</code>、<code>data</code> 这些属性都不必在配置中指定。</p>
<h3 data-line="149" class="line"><a id="_149"></a>并发</h3>
<p>处理并发请求的助手函数</p>
<h5 data-line="153" class="line"><a id="axiosalliterable_153"></a>axios.all(iterable)</h5>
<h5 data-line="154" class="line"><a id="axiosspreadcallback_154"></a>axios.spread(callback)</h5>
<h3 data-line="156" class="line"><a id="_156"></a>创建实例</h3>
<p>可以使用自定义配置新建一个 axios 实例</p>
<h5 data-line="160" class="line"><a id="axioscreateconfig_160"></a>axios.create([config])</h5>
<pre><code><span class="hljs-keyword">var</span> instance = axios.create({
  <span class="hljs-attr">baseURL</span>: <span class="hljs-string">'https://some-domain.com/api/'</span>,
  <span class="hljs-attr">timeout</span>: <span class="hljs-number">1000</span>,
  <span class="hljs-attr">headers</span>: {<span class="hljs-string">'X-Custom-Header'</span>: <span class="hljs-string">'foobar'</span>}
});
</code></pre>
<h3 data-line="170" class="line"><a id="_170"></a>实例方法</h3>
<p>以下是可用的实例方法。指定的配置将与实例的配置合并</p>
<h5 data-line="174" class="line"><a id="axiosrequestconfig_174"></a>axios#request(config)</h5>
<h5 data-line="175" class="line"><a id="axiosgeturl_config_175"></a>axios#get(url[, config])</h5>
<h5 data-line="176" class="line"><a id="axiosdeleteurl_config_176"></a>axios#delete(url[, config])</h5>
<h5 data-line="177" class="line"><a id="axiosheadurl_config_177"></a>axios#head(url[, config])</h5>
<h5 data-line="178" class="line"><a id="axiosposturl_data_config_178"></a>axios#post(url[, data[, config]])</h5>
<h5 data-line="179" class="line"><a id="axiosputurl_data_config_179"></a>axios#put(url[, data[, config]])</h5>
<h5 data-line="180" class="line"><a id="axiospatchurl_data_config_180"></a>axios#patch(url[, data[, config]])</h5>
<h2 data-line="182" class="line"><a id="_182"></a>请求配置</h2>
<p>这些是创建请求时可以用的配置选项。只有 <code>url</code> 是必需的。如果没有指定 <code>method</code>，请求将默认使用 <code>get</code> 方法。</p>
<pre><code>{
  <span class="hljs-comment">// `url` 是用于请求的服务器 URL</span>
  url: <span class="hljs-string">'/user'</span>,

  <span class="hljs-comment">// `method` 是创建请求时使用的方法</span>
  method: <span class="hljs-string">'get'</span>, <span class="hljs-comment">// 默认是 get</span>

  <span class="hljs-comment">// `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。</span>
  <span class="hljs-comment">// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL</span>
  baseURL: <span class="hljs-string">'https://some-domain.com/api/'</span>,

  <span class="hljs-comment">// `transformRequest` 允许在向服务器发送前，修改请求数据</span>
  <span class="hljs-comment">// 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法</span>
  <span class="hljs-comment">// 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream</span>
  transformRequest: [<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">data</span>) </span>{
    <span class="hljs-comment">// 对 data 进行任意转换处理</span>

    <span class="hljs-keyword">return</span> data;
  }],

  <span class="hljs-comment">// `transformResponse` 在传递给 then/catch 前，允许修改响应数据</span>
  transformResponse: [<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">data</span>) </span>{
    <span class="hljs-comment">// 对 data 进行任意转换处理</span>

    <span class="hljs-keyword">return</span> data;
  }],

  <span class="hljs-comment">// `headers` 是即将被发送的自定义请求头</span>
  headers: {<span class="hljs-string">'X-Requested-With'</span>: <span class="hljs-string">'XMLHttpRequest'</span>},

  <span class="hljs-comment">// `params` 是即将与请求一起发送的 URL 参数</span>
  <span class="hljs-comment">// 必须是一个无格式对象(plain object)或 URLSearchParams 对象</span>
  params: {
    <span class="hljs-attr">ID</span>: <span class="hljs-number">12345</span>
  },

  <span class="hljs-comment">// `paramsSerializer` 是一个负责 `params` 序列化的函数</span>
  <span class="hljs-comment">// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)</span>
  paramsSerializer: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">params</span>) </span>{
    <span class="hljs-keyword">return</span> Qs.stringify(params, {<span class="hljs-attr">arrayFormat</span>: <span class="hljs-string">'brackets'</span>})
  },

  <span class="hljs-comment">// `data` 是作为请求主体被发送的数据</span>
  <span class="hljs-comment">// 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'</span>
  <span class="hljs-comment">// 在没有设置 `transformRequest` 时，必须是以下类型之一：</span>
  <span class="hljs-comment">// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams</span>
  <span class="hljs-comment">// - 浏览器专属：FormData, File, Blob</span>
  <span class="hljs-comment">// - Node 专属： Stream</span>
  data: {
    <span class="hljs-attr">firstName</span>: <span class="hljs-string">'Fred'</span>
  },

  <span class="hljs-comment">// `timeout` 指定请求超时的毫秒数(0 表示无超时时间)</span>
  <span class="hljs-comment">// 如果请求话费了超过 `timeout` 的时间，请求将被中断</span>
  timeout: <span class="hljs-number">1000</span>,

  <span class="hljs-comment">// `withCredentials` 表示跨域请求时是否需要使用凭证</span>
  withCredentials: <span class="hljs-literal">false</span>, <span class="hljs-comment">// 默认的</span>

  <span class="hljs-comment">// `adapter` 允许自定义处理请求，以使测试更轻松</span>
  <span class="hljs-comment">// 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).</span>
  adapter: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">config</span>) </span>{
    <span class="hljs-comment">/* ... */</span>
  },

  <span class="hljs-comment">// `auth` 表示应该使用 HTTP 基础验证，并提供凭据</span>
  <span class="hljs-comment">// 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头</span>
  auth: {
    <span class="hljs-attr">username</span>: <span class="hljs-string">'janedoe'</span>,
    <span class="hljs-attr">password</span>: <span class="hljs-string">'s00pers3cret'</span>
  },

  <span class="hljs-comment">// `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'</span>
  responseType: <span class="hljs-string">'json'</span>, <span class="hljs-comment">// 默认的</span>

  <span class="hljs-comment">// `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称</span>
  xsrfCookieName: <span class="hljs-string">'XSRF-TOKEN'</span>, <span class="hljs-comment">// default</span>

  <span class="hljs-comment">// `xsrfHeaderName` 是承载 xsrf token 的值的 HTTP 头的名称</span>
  xsrfHeaderName: <span class="hljs-string">'X-XSRF-TOKEN'</span>, <span class="hljs-comment">// 默认的</span>

  <span class="hljs-comment">// `onUploadProgress` 允许为上传处理进度事件</span>
  onUploadProgress: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">progressEvent</span>) </span>{
    <span class="hljs-comment">// 对原生进度事件的处理</span>
  },

  <span class="hljs-comment">// `onDownloadProgress` 允许为下载处理进度事件</span>
  onDownloadProgress: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">progressEvent</span>) </span>{
    <span class="hljs-comment">// 对原生进度事件的处理</span>
  },

  <span class="hljs-comment">// `maxContentLength` 定义允许的响应内容的最大尺寸</span>
  maxContentLength: <span class="hljs-number">2000</span>,

  <span class="hljs-comment">// `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte</span>
  validateStatus: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">status</span>) </span>{
    <span class="hljs-keyword">return</span> status &gt;= <span class="hljs-number">200</span> &amp;&amp; status &lt; <span class="hljs-number">300</span>; <span class="hljs-comment">// 默认的</span>
  },

  <span class="hljs-comment">// `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目</span>
  <span class="hljs-comment">// 如果设置为0，将不会 follow 任何重定向</span>
  maxRedirects: <span class="hljs-number">5</span>, <span class="hljs-comment">// 默认的</span>

  <span class="hljs-comment">// `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项：</span>
  <span class="hljs-comment">// `keepAlive` 默认没有启用</span>
  httpAgent: <span class="hljs-keyword">new</span> http.Agent({ <span class="hljs-attr">keepAlive</span>: <span class="hljs-literal">true</span> }),
  <span class="hljs-attr">httpsAgent</span>: <span class="hljs-keyword">new</span> https.Agent({ <span class="hljs-attr">keepAlive</span>: <span class="hljs-literal">true</span> }),

  <span class="hljs-comment">// 'proxy' 定义代理服务器的主机名称和端口</span>
  <span class="hljs-comment">// `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据</span>
  <span class="hljs-comment">// 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。</span>
  proxy: {
    <span class="hljs-attr">host</span>: <span class="hljs-string">'127.0.0.1'</span>,
    <span class="hljs-attr">port</span>: <span class="hljs-number">9000</span>,
    <span class="hljs-attr">auth</span>: : {
      <span class="hljs-attr">username</span>: <span class="hljs-string">'mikeymike'</span>,
      <span class="hljs-attr">password</span>: <span class="hljs-string">'rapunz3l'</span>
    }
  },

  <span class="hljs-comment">// `cancelToken` 指定用于取消请求的 cancel token</span>
  <span class="hljs-comment">// （查看后面的 Cancellation 这节了解更多）</span>
  cancelToken: <span class="hljs-keyword">new</span> CancelToken(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">cancel</span>) </span>{
  })
}
</code></pre>
<h2 data-line="314" class="line"><a id="_314"></a>响应结构</h2>
<p>某个请求的响应包含以下信息</p>
<pre><code>{
  <span class="hljs-comment">// `data` 由服务器提供的响应</span>
  data: {},

  <span class="hljs-comment">// `status` 来自服务器响应的 HTTP 状态码</span>
  status: <span class="hljs-number">200</span>,

  <span class="hljs-comment">// `statusText` 来自服务器响应的 HTTP 状态信息</span>
  statusText: <span class="hljs-string">'OK'</span>,

  <span class="hljs-comment">// `headers` 服务器响应的头</span>
  headers: {},

  <span class="hljs-comment">// `config` 是为请求提供的配置信息</span>
  config: {}
}
</code></pre>
<p>使用 <code>then</code> 时，你将接收下面这样的响应：</p>
<pre><code>axios.get(<span class="hljs-string">'/user/12345'</span>)
  .then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">response</span>) </span>{
    <span class="hljs-built_in">console</span>.log(response.data);
    <span class="hljs-built_in">console</span>.log(response.status);
    <span class="hljs-built_in">console</span>.log(response.statusText);
    <span class="hljs-built_in">console</span>.log(response.headers);
    <span class="hljs-built_in">console</span>.log(response.config);
  });
</code></pre>
<p>在使用 <code>catch</code> 时，或传递 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then" target="_blank">rejection callback</a> 作为 <code>then</code> 的第二个参数时，响应可以通过 <code>error</code> 对象可被使用，正如在<a href="#handling-errors">错误处理</a>这一节所讲。</p>
<h2 data-line="352" class="line"><a id="defaults_352"></a>配置的默认值/defaults</h2>
<p>你可以指定将被用在各个请求的配置默认值</p>
<h3 data-line="356" class="line"><a id="_axios__356"></a>全局的 axios 默认值</h3>
<pre><code>axios.defaults.baseURL = <span class="hljs-string">'https://api.example.com'</span>;
axios.defaults.headers.common[<span class="hljs-string">'Authorization'</span>] = AUTH_TOKEN;
axios.defaults.headers.post[<span class="hljs-string">'Content-Type'</span>] = <span class="hljs-string">'application/x-www-form-urlencoded'</span>;
</code></pre>
<h3 data-line="364" class="line"><a id="_364"></a>自定义实例默认值</h3>
<pre><code><span class="hljs-comment">// 创建实例时设置配置的默认值</span>
<span class="hljs-keyword">var</span> instance = axios.create({
  <span class="hljs-attr">baseURL</span>: <span class="hljs-string">'https://api.example.com'</span>
});

<span class="hljs-comment">// 在实例已创建后修改默认值</span>
instance.defaults.headers.common[<span class="hljs-string">'Authorization'</span>] = AUTH_TOKEN;
</code></pre>
<h3 data-line="376" class="line"><a id="_376"></a>配置的优先顺序</h3>
<p>配置会以一个优先顺序进行合并。这个顺序是：在 <code>lib/defaults.js</code> 找到的库的默认值，然后是实例的 <code>defaults</code> 属性，最后是请求的 <code>config</code> 参数。后者将优先于前者。这里是一个例子：</p>
<pre><code><span class="hljs-comment">// 使用由库提供的配置的默认值来创建实例</span>
<span class="hljs-comment">// 此时超时配置的默认值是 `0`</span>
<span class="hljs-keyword">var</span> instance = axios.create();

<span class="hljs-comment">// 覆写库的超时默认值</span>
<span class="hljs-comment">// 现在，在超时前，所有请求都会等待 2.5 秒</span>
instance.defaults.timeout = <span class="hljs-number">2500</span>;

<span class="hljs-comment">// 为已知需要花费很长时间的请求覆写超时设置</span>
instance.get(<span class="hljs-string">'/longRequest'</span>, {
  <span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span>
});
</code></pre>
<h2 data-line="395" class="line"><a id="_395"></a>拦截器</h2>
<p>在请求或响应被 <code>then</code> 或 <code>catch</code> 处理前拦截它们。</p>
<pre><code><span class="hljs-comment">// 添加请求拦截器</span>
axios.interceptors.request.use(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">config</span>) </span>{
    <span class="hljs-comment">// 在发送请求之前做些什么</span>
    <span class="hljs-keyword">return</span> config;
  }, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) </span>{
    <span class="hljs-comment">// 对请求错误做些什么</span>
    <span class="hljs-keyword">return</span> <span class="hljs-built_in">Promise</span>.reject(error);
  });

<span class="hljs-comment">// 添加响应拦截器</span>
axios.interceptors.response.use(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) </span>{
    <span class="hljs-comment">// 对响应数据做点什么</span>
    <span class="hljs-keyword">return</span> response;
  }, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) </span>{
    <span class="hljs-comment">// 对响应错误做点什么</span>
    <span class="hljs-keyword">return</span> <span class="hljs-built_in">Promise</span>.reject(error);
  });
</code></pre>
<p>如果你想在稍后移除拦截器，可以这样：</p>
<pre><code><span class="hljs-keyword">var</span> myInterceptor = axios.interceptors.request.use(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{<span class="hljs-comment">/*...*/</span>});
axios.interceptors.request.eject(myInterceptor);
</code></pre>
<p>可以为自定义 axios 实例添加拦截器</p>
<pre><code><span class="hljs-keyword">var</span> instance = axios.create();
instance.interceptors.request.use(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{<span class="hljs-comment">/*...*/</span>});
</code></pre>
<h2 data-line="433" class="line"><a id="_433"></a>错误处理</h2>
<pre><code>axios.get(<span class="hljs-string">'/user/12345'</span>)
  .catch(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) </span>{
    <span class="hljs-keyword">if</span> (error.response) {
      <span class="hljs-comment">// 请求已发出，但服务器响应的状态码不在 2xx 范围内</span>
      <span class="hljs-built_in">console</span>.log(error.response.data);
      <span class="hljs-built_in">console</span>.log(error.response.status);
      <span class="hljs-built_in">console</span>.log(error.response.headers);
    } <span class="hljs-keyword">else</span> {
      <span class="hljs-comment">// Something happened in setting up the request that triggered an Error</span>
      <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Error'</span>, error.message);
    }
    <span class="hljs-built_in">console</span>.log(error.config);
  });
</code></pre>
<p>可以使用 <code>validateStatus</code> 配置选项定义一个自定义 HTTP 状态码的错误范围。</p>
<pre><code>axios.get(<span class="hljs-string">'/user/12345'</span>, {
  <span class="hljs-attr">validateStatus</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">status</span>) </span>{
    <span class="hljs-keyword">return</span> status &lt; <span class="hljs-number">500</span>; <span class="hljs-comment">// 状态码在大于或等于500时才会 reject</span>
  }
})
</code></pre>
<h2 data-line="461" class="line"><a id="_461"></a>取消</h2>
<p>使用 <em>cancel token</em> 取消请求</p>
<blockquote class="default"><p>Axios 的 cancel token API 基于<a href="https://github.com/tc39/proposal-cancelable-promises" target="_blank">cancelable promises proposal</a>，它还处于第一阶段。</p></blockquote>
<p>可以使用 <code>CancelToken.source</code> 工厂方法创建 cancel token，像这样：</p>
<pre><code><span class="hljs-keyword">var</span> CancelToken = axios.CancelToken;
<span class="hljs-keyword">var</span> source = CancelToken.source();

axios.get(<span class="hljs-string">'/user/12345'</span>, {
  <span class="hljs-attr">cancelToken</span>: source.token
}).catch(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">thrown</span>) </span>{
  <span class="hljs-keyword">if</span> (axios.isCancel(thrown)) {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Request canceled'</span>, thrown.message);
  } <span class="hljs-keyword">else</span> {
    <span class="hljs-comment">// 处理错误</span>
  }
});

<span class="hljs-comment">// 取消请求（message 参数是可选的）</span>
source.cancel(<span class="hljs-string">'Operation canceled by the user.'</span>);
</code></pre>
<p>还可以通过传递一个 executor 函数到 <code>CancelToken</code> 的构造函数来创建 cancel token：</p>
<pre><code><span class="hljs-keyword">var</span> CancelToken = axios.CancelToken;
<span class="hljs-keyword">var</span> cancel;

axios.get(<span class="hljs-string">'/user/12345'</span>, {
  <span class="hljs-attr">cancelToken</span>: <span class="hljs-keyword">new</span> CancelToken(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">executor</span>(<span class="hljs-params">c</span>) </span>{
    <span class="hljs-comment">// executor 函数接收一个 cancel 函数作为参数</span>
    cancel = c;
  })
});

<span class="hljs-comment">// 取消请求</span>
cancel();
</code></pre>
<p>Note : 可以使用同一个 cancel token 取消多个请求</p>
<h2 data-line="506" class="line"><a id="Semver_506"></a>Semver</h2>
<p>Until axios reaches a <code>1.0</code> release, breaking changes will be released with a new minor version. For example <code>0.5.1</code>, and <code>0.5.4</code> will have the same API, but <code>0.6.0</code> will have breaking changes.</p>
<h2 data-line="510" class="line"><a id="Promises_510"></a>Promises</h2>
<p>axios 依赖原生的 ES6 Promise 实现而<a href="http://caniuse.com/promises" target="_blank">被支持</a>.<br>
如果你的环境不支持 ES6 Promise，你可以使用 <a href="https://github.com/jakearchibald/es6-promise" target="_blank">polyfill</a>.</p>
<h2 data-line="515" class="line"><a id="TypeScript_515"></a>TypeScript</h2>
<p>axios includes <a href="http://typescriptlang.org" target="_blank">TypeScript</a> definitions.</p>
<pre><code><span class="hljs-keyword">import</span> axios <span class="hljs-keyword">from</span> <span class="hljs-string">'axios'</span>;
axios.get(<span class="hljs-string">'/user?ID=12345'</span>);
</code></pre>
<h2 data-line="522" class="line"><a id="Resources_522"></a>Resources</h2>
<ul><li><a href="https://github.com/mzabriskie/axios/blob/master/CHANGELOG.md" target="_blank">Changelog</a></li><li><a href="https://github.com/mzabriskie/axios/blob/master/UPGRADE_GUIDE.md" target="_blank">Upgrade Guide</a></li><li><a href="https://github.com/mzabriskie/axios/blob/master/ECOSYSTEM.md" target="_blank">Ecosystem</a></li><li><a href="https://github.com/mzabriskie/axios/blob/master/CONTRIBUTING.md" target="_blank">Contributing Guide</a></li><li><a href="https://github.com/mzabriskie/axios/blob/master/CODE_OF_CONDUCT.md" target="_blank">Code of Conduct</a></li></ul>
<h2 data-line="530" class="line"><a id="Credits_530"></a>Credits</h2>
<p>axios is heavily inspired by the <a href="https://docs.angularjs.org/api/ng/service/$http" target="_blank">$http service</a> provided in <a href="https://angularjs.org/" target="_blank">Angular</a>. Ultimately axios is an effort to provide a standalone <code>$http</code>-like service for use outside of Angular.</p>
<h2 data-line="534" class="line"><a id="License_534"></a>License</h2>
<p>MIT</p>
 </div><div class="article-navigation"><span class="next">下一篇：<a href="234846">升级指南</a></span></div><div class="article-comment"><h3 class="ui header dividing">相关评论(1)</h3><form class="ui form"><input type="hidden" name="article_id" value="234845"><div class="field"><textarea name="content" placeholder="文明上网,理性发言" rows="4"></textarea></div><button type="submit" class="ui green submit button right floated small">发布 (Ctrl+Enter)</button></form><div class="ui comments"><div class="comment"><a class="avatar"><img src="https://avatar.kancloud.cn/d4/1d8cd98f00b204e9800998ecf8427e!middle"></a><div class="content"><a class="author">一汀烟雨</a><div class="metadata">@#260731 ·<span class="date">5 个月前</span></div><div class="text article-body"><p>拦截器错误时（token失效），能再次请求一次么（重新获得token后）?就好了啊</p>
</div><div class="actions"><a><i class="icon reply"></i>回复</a></div></div></div></div></div></div></div></div></div>



</body>
</html>